<script setup>
/**
 * 文件引入
 */
import { ref, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { formatSpecification } from "@/utils/formatSpecFun"

import { cartListAPI } from "@/server/api/cartView";
import {
  GetAddressAPI,
  AddAddressAPI,
  ReverseAddressAPI,
  DeleteAddressAPI,
  generateUnpaidOrderAPI,
} from "@/server/api/Confirm";


import { useUseStore } from "@/stores/user";
import { orderStatus } from "@/stores/payStore";
import { useIndexStore } from "@/stores/indexStore";

import { getJWTFun } from "@/hook/jsrsasign";
import { ToastFun } from "@/hook/toast";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * use
 */
const UseStore = useUseStore();
const router = useRouter();

/**
 * 变量声明
 */
const showPopups = ref(false); // 弹出提示是否展示
const addressInfo = ref({}); // 头部地址信息
const OrderItem = ref([]); // 上一页拿过来的order
const addressDetailIsShow = ref(false); // 添加地址、修改地址的弹窗
const PopStatus = ref(true); // 弹窗状态是新增地址还是修改地址,true为新增，false为修改
const PromptInfo = ref(""); // 弹出提示的信息
const isHaveaddressInfo = ref(false); // 是否有地址信息
const total = ref(0); // 商品总价
const checkboxIsCheck = ref(true); // 小圆点是否点击
const mskIsShow = ref(false); // 新增地址遮罩层是否展示
const msk3IsShow = ref(false); // 删除地址遮罩层是否展示
const index = ref(0); //点击reverse的和删除键拿到对应index
const addAddressInfo = ref({
  userName: "",
  address: "",
  phone: "",
}); // 新增地址的信息
const addersList = ref([]); // 接口拿过来赋值的地址信息
const tradeName = ref(""); // 要传递给下一页的商品名

const cartList = ref([])
/**
 * 函数方法
 */
// 选择地址弹窗展示
let showMask = () => {
  addressDetailIsShow.value = true;
};

// 关闭选择地址弹窗
let closeMask = () => {
  addressDetailIsShow.value = false;
};

// 选择地址
let checkAdrress = (item) => {
  addressInfo.value = item;
  isHaveaddressInfo.value = true;
  addressDetailIsShow.value = false;
  orderStatus().itmeOrderReq.buyerDataId = addressInfo.value.buyerDataId;
};

// 修改地址
let resAdderss = (item, idx) => {
  PopStatus.value = false;
  mskIsShow.value = true;
  addAddressInfo.value = item;
  index.value = idx;
};

// 点击新增地址
let addNewAddress = () => {
  // 临时清空addressInfo
  addAddressInfo.value = {
    userName: "",
    address: "",
    phone: "",
  };
  PopStatus.value = true;
  mskIsShow.value = true;
};

// 新增地址、修改地址的确定按钮
let Confirm = () => {
  // 如果是新增地址的确定
  if (PopStatus.value == true) {
    // 如果没有填完
    for (let key in addAddressInfo.value) {
      if (addAddressInfo.value[key].length == 0) {
        PromptInfo.value = "Each field is required";
        showPopups.value = true;
        setTimeout(() => {
          showPopups.value = false;
        }, 2000);
        return;
      }
    }
    // 准备要传递给接口的参数
    const addressData = {
      address: addAddressInfo.value.address,
      phone: addAddressInfo.value.phone,
      userId: UseStore.userId,
      userName: addAddressInfo.value.userName,
    };

    console.log(addressData);
    AddAddress(addressData);
    mskIsShow.value = false;
  } else {
    // 如果是修改地址的确定
    for (let key in addAddressInfo.value) {
      // 如果没有填完
      if (addAddressInfo.value[key].length == 0) {
        PromptInfo.value = "Each field is required";
        showPopups.value = true;
        setTimeout(() => {
          showPopups.value = false;
        }, 2000);
        return;
      }
    }
    // 调用接口需要传入的参数
    const reverseData = {
      address: addAddressInfo.value.address,
      phone: addAddressInfo.value.phone,
      userId: UseStore.userId,
      userName: addAddressInfo.value.userName,
      buyerDataId: addersList.value[index.value].buyerDataId,
    };

    ReverseAddress(reverseData);
    mskIsShow.value = false;
  }
};

// 点击×号小圆圈，提示是否删除
let Delete = (idx) => {
  index.value = idx;
  msk3IsShow.value = true;
};

// 点击取消按钮
let clickCancle = () => {
  msk3IsShow.value = false;
};

//点击确认按钮
let clickConfirm = () => {
  console.log(addersList.value[index.value].buyerDataId);
  // 调用接口
  DeleteAddress(addersList.value[index.value].buyerDataId);
  msk3IsShow.value = false;
};

// 关闭新增地址弹窗
let closeMsk = () => {
  // if (PopStatus.value == true) {
  //   mskIsShow.value = false;
  // }
  mskIsShow.value = false;
};

// 点击小圆点
const check = () => {
  console.log(!checkboxIsCheck.value);
};

// 提交订单去结算
const Submit = () => {
  // 传递给下一个页面的商品名字
  const tradeArr = [];
  console.log(OrderItem.value);
  OrderItem.value.forEach((item) => {
    tradeArr.push(item.itemCommodityName);
  });
  console.log(tradeArr);
  tradeName.value = tradeArr.join(",");
  console.log(tradeName.value);
  // 如果没选择地址,不允许提交
  if (isHaveaddressInfo.value == false || checkboxIsCheck.value == false) {
    ToastFun("show", {
      msg: "Select a address",
      position: "bottom",
    });
  } else {
    let { buyerDataId, uid } =
      orderStatus().itmeOrderReq;

    let newArr = [];
    OrderItem.value.forEach((item) => {
      let newItem = {};
      for (const i in item) {
        if (i != "itemCommodityName") {
          newItem[i] = item[i];
        }
        // if (i == "avatarImag") {
        //   if (item[i] !== null) {
        //     let str = item[i].split("https://sea.im/api")[1].split("_320_180");
        //     newItem[i] = str[0] + str[1];
        //   }
        // }
      }
      newArr.push(newItem);
    });

    // 生成未支付订单请求体
    let itmeOrderReq = {
      buyerDataId,
      uid,
      itemOrderDetailDTOList: newArr,
    };

    generateUnpaidOrder(itmeOrderReq);
  }
  console.log(1);
};

/**
 * 异步请求接口函数
 */
// 获取买家地址接口
const getUserAddress = async (userId) => {
  const res = await GetAddressAPI(userId);
  console.log("data:", res.data.data);
  addersList.value = res.data.data;
  addersList.value.forEach((item) => {
    if (item.isDefault == 1) {
      addressInfo.value = item;
      orderStatus().itmeOrderReq.buyerDataId = addressInfo.value.buyerDataId;

      isHaveaddressInfo.value = true;
    }
    return;
  });
};

// 新增地址接口
const AddAddress = async (addressData) => {
  const res = await AddAddressAPI(addressData);
  console.log("data:", res.data.data);
  getUserAddress(UseStore.userId);
};

// 修改地址接口
const ReverseAddress = async (ReverseData) => {
  const res = await ReverseAddressAPI(ReverseData);
  console.log("data:", res.data.data);
  getUserAddress(UseStore.userId);
};

// 删除地址接口
const DeleteAddress = async (id) => {
  const res = await DeleteAddressAPI(id);
  console.log("data:", res.data.data);
  getUserAddress(UseStore.userId);
};

// 生成未支付订单接口
const generateUnpaidOrder = async (itmeOrderReq) => {
  try {
    ToastFun("Loading", { duration: 0 });
    // 生成token
    const token = getJWTFun(itmeOrderReq);
    console.log(itmeOrderReq);
    // 将支付类型改为网店，以调用网店的接口
    orderStatus().payType = "item";
    const res = await generateUnpaidOrderAPI(token);
    console.log("未支付订单:", res.data.data);
    if (res.data.code == 200) {
      // 生成支付订单的请求体
      orderStatus().itmePayReq = {
        orderIdArray: res.data.data,
        uid: UseStore.userId,
        payPointSum: total.value.toFixed(2),
      };
      ToastFun("show", { msg: t("pay.checkoutSuccess") });
      router.push({ path: "/itemPay" });
    } else {
      ToastFun("fail", { msg: t("pay.OrderFailure") });
    }
  } catch (error) {
    ToastFun("fail", { msg: t("item.details.NetworkError") });
  }
};


const getCartList = async (userId) => {
  try {
    ToastFun("Loading", { duration: 0 });

    const res = await cartListAPI(userId);
    if (res.data.code === 200) {
      cartList.value = res.data.data;
      console.log("购物车数据", cartList.value);

      ToastFun("close");
      // 获取 orderStatus 中的商品 ID 列表
      OrderItem.value = orderStatus().itmeOrderReq.itemOrderDetailDTOList;

      // 遍历 itemOrderList，将对应的商品信息赋值
      OrderItem.value.forEach(item => {
        const matchedCommodity = cartList.value.find(
          cartItem => cartItem.commodityId === item.commodityId
        );
        if (matchedCommodity) {
          Object.assign(item, matchedCommodity); // 将匹配到的商品信息合并到当前订单项
        }
      });
      OrderItem.value.forEach((item) => {
        total.value += item.price * item.number;
      });
      console.log("更新后的订单请求体", OrderItem.value);
    }


  } catch (error) {
    ToastFun("fail", { msg: t("item.details.NetworkError") });
  }
}


/**
 * 生命钩子函数
 */
onBeforeMount(() => {
  // 获取地址
  getUserAddress(UseStore.userId);

  getCartList(UseStore.userId)

});
</script>

<template>
  <div class="contain">
    <!-- 导航栏 -->
    <div class="nav">
      <div class="left" @click="router.push('/CartView')">
        <img src="/images/cart/back.png" :class="[useIndexStore().isRtl ? 'trun_180' : '']" />
      </div>
      <div class="title">{{ $t("order.confirmOrder") }}</div>
    </div>

    <!-- 占位 -->
    <div class="Placeholder1"></div>

    <!-- 选择地址 -->
    <div class="chooseAddress">
      <div class="map">
        <img src="/images/cart/mapLogo.png" />
      </div>

      <div class="addressInfo">
        <div class="Please" v-if="!isHaveaddressInfo">
          {{ $t("order.selectAddress") }}
        </div>
        <template v-if="isHaveaddressInfo">
          <div class="address">{{ addressInfo.address }}</div>
          <div class="contact">
            <div class="consignee">{{ addressInfo.userName }}</div>
            <div class="ContactNumber">{{ addressInfo.phone }}</div>
          </div>
        </template>
      </div>

      <div class="right" @click="showMask">
        <img src="/images/cart/go.png" :class="[useIndexStore().isRtl ? 'trun_180' : '']" />
      </div>
    </div>

    <!-- 购物车 -->
    <div class="cart">
      <!-- <div class="item" v-for="item of OrderItem" :key="item.commodityId">
        <img :src="item.avatarImag" />
        <div class="right">
          <div class="trade">{{ item.itemCommodityName }}</div>
          <div class="price">
            eCNY<span>{{ item.price }}</span>
          </div>
        </div>
        <div :class="['count', useIndexStore().isRtl ? 'is_rtl' : '']">
          X<span>{{ item.number }}</span>
        </div>
      </div> -->

      <van-card style="margin: 10rem 10rem 0 10rem; background-color: #ffffff" v-for="item of OrderItem"
        :key="item.commodityId" :num="item.number" :price="item.price.toFixed(2)"
        :desc="formatSpecification(item.commoditySpecification)" :title="item.itemCommodityName"
        :thumb="item.avatarImag" />
    </div>

    <!-- 支付方式 -->
    <div class="PointPayment">
      <div class="title">{{ $t("order.pointPay") }}</div>
      <input type="checkbox" v-model="checkboxIsCheck" @click="check"
        :class="[useIndexStore().isRtl ? 'is_rtl' : '']" />
    </div>

    <!-- 总价 -->
    <!-- <div class="GoodsPrice">
      <div class="first">
        {{ $t("order.total") }}<span>{{ total.toFixed(2) }}</span>
      </div>
      <div class="medium">
        {{ $t("order.discount") }}<span>{{ total.toFixed(2) }}</span>
      </div>
      <div class="last">
        count {{ $t("order.payable") }}<span>{{ total.toFixed(2) }}</span>
      </div>
    </div> -->

    <!-- 合计 -->
    <div class="Total">
      <div>{{ $t("order.total") }}</div>
      <span>{{ total.toFixed(2) }}</span>
    </div>

    <div style="height: 50rem"></div>

    <!-- 提交订单 -->
    <div class="Submit" @click="Submit">{{ $t("order.submit") }}</div>

    <!-- 遮罩层 -->
    <div class="mask" v-show="addressDetailIsShow" @click="closeMask"></div>

    <!-- 地址 -->
    <div class="addressDetail" v-show="addressDetailIsShow">
      <!-- 占位 -->
      <div class="Placeholder1"></div>
      <!-- 地址每一项item -->
      <div class="item" @click="checkAdrress(item)" v-for="(item, index) of addersList" :key="item.id">
        <div class="address ellipsis-2">{{ item.address }}</div>
        <div class="contact">
          <div class="consignee ellipsis">{{ item.userName }}</div>
          <div class="ContactNumber ellipsis">{{ item.phone }}</div>
        </div>
        <div class="Revise" @click.stop="resAdderss(item, index)">Revise</div>
        <div :class="['delete', useIndexStore().isRtl ? 'is_rtl' : '']" @click.stop="Delete(index)">
          ⅹ
        </div>
      </div>

      <!-- 新增地址 -->
      <div class="box">
        <div class="addNewAddress" @click="addNewAddress">
          <div class="icon">+</div>
          Add a new address
        </div>
      </div>
    </div>

    <!-- 没有选择地址的提示弹窗 -->
    <div v-show="showPopups" class="box300">{{ PromptInfo }}</div>

    <!-- 新增地址遮罩层2 -->
    <div class="msk2" v-show="mskIsShow" @click.self="closeMsk">
      <!-- 新增地址弹出框 -->
      <div class="addAddressPop">
        <div class="userName">
          <span>User Name</span>
          <input type="text" placeholder="User Name" maxlength="15" v-model.trim="addAddressInfo.userName" />
        </div>
        <div class="FullAddress">
          <span>Full Address</span>
          <input type="text" placeholder="Full Address" v-model.trim="addAddressInfo.address" />
        </div>
        <div class="phoneNum">
          <span>Phone Number</span>
          <input type="tel" maxlength="15" placeholder="Phone Number"
            onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');" v-model.trim="addAddressInfo.phone" />
        </div>
        <div class="confirmBtn" @click="Confirm">Confirm</div>
      </div>
    </div>

    <!-- 删除地址遮罩层3 -->
    <div class="msk3" v-show="msk3IsShow">
      <!-- 删除地址弹出框 -->
      <div class="deleteAddress">
        <span class="title">Do you confirm the deletion?</span>
        <div>
          <span class="no" @click="clickCancle">NO</span>
          <span class="yes" @click="clickConfirm">YES</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 容器
.contain {
  min-height: 100vh;
  max-height: 100vh;

  overflow-y: scroll;

  background-color: rgba(235, 236, 237, 1);
  font-family: "PingFang SC";
}

.box300 {
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 16rem;
  border: none;
  width: 360rem;
  height: 50rem;
  border-radius: 99rem;
  position: fixed;
  z-index: 9999;
  bottom: 180rem;
  left: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

// 导航栏
.nav {
  height: 24rem;
  padding: 24rem 16rem;

  display: flex;
  align-items: center;

  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(235, 236, 237, 1);

  .left {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 24rem;
    height: 24rem;
    line-height: 24rem;
    text-align: center;

    img {
      width: 6rem;
      height: 12rem;
    }
  }

  .title {
    height: 28rem;
    margin: 0 20rem;
    font-size: 20rem;
    font-weight: 500;
    line-height: 28rem;
    text-align: center;
  }
}

.chooseAddress {
  width: 390rem;
  height: 97rem;
  background: #fff;
  display: flex;
  align-items: center;
  z-index: 999;

  .map {
    width: 24rem;
    height: 24rem;
    margin: 0 16rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .addressInfo {
    width: 300rem;
    height: 65rem;
    margin-left: 12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .Please {
      line-height: 65rem;
      font-size: 16rem;
      font-weight: 400;
      color: rgba(107, 107, 107, 1);
    }

    .address {
      margin: 0 10rem;
      width: max-content;

      font-size: 14rem;
      font-weight: 400;
      height: 16rem;
      line-height: 16rem;
      color: rgba(107, 107, 107, 1);
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-align: left;
    }

    .contact {
      display: flex;
      font-size: 16rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);

      .consignee {
        margin: 0 10rem;
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-align: left;
      }

      .ContactNumber {
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-align: left;
      }
    }
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 24rem;
    height: 24rem;
    line-height: 24rem;
    margin: 0 10rem;

    img {
      width: 6rem;
      height: 12rem;
    }
  }
}

.Placeholder1 {
  height: 80rem;
}

.cart {
  width: 390rem;
  margin-top: 12rem;

  .item {
    width: 390rem;
    height: 142rem;
    background: #fff;
    display: flex;
    position: relative;

    img {
      width: 102rem;
      height: 118rem;
      border-radius: 12rem;
      margin: 12rem 16rem;
    }

    .right {
      width: 210rem;
      height: 118rem;
      margin-top: 12rem;
      justify-content: space-between;
      display: flex;
      flex-direction: column;

      .trade {
        width: 210rem;
        font-size: 14rem;
        font-weight: 550;
        color: rgba(51, 51, 51, 1);
        height: 20rem;
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-align: left;
      }

      .price {
        margin-top: 12rem;
        font-size: 14rem;
        font-weight: 550;
        color: rgba(51, 51, 51, 1);

        span {
          font-size: 16rem;
          font-weight: 550;
          color: rgba(51, 51, 51, 1);
          margin-left: 5rem;
        }
      }
    }

    .count {
      position: absolute;
      bottom: 12rem;
      right: 16rem;
      font-size: 14rem;
      font-weight: 550;
      color: rgba(51, 51, 51, 1);

      &.is_rtl {
        right: unset;
        left: 16rem;
      }
    }
  }
}

.PointPayment {
  margin: 12rem 16rem;
  width: 358rem;
  height: 71rem;
  border-radius: 12rem;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .title {
    margin: 0 12rem;
    font-size: 16rem;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }

  input {
    position: absolute;
    right: 12rem;
    top: 28rem;
    width: 20rem;
    height: 20rem;
    background-color: #fff;
    appearance: none;
    border: 1rem solid #c9c9c9;
    border-radius: 50%;
    outline: none;

    &.is_rtl {
      right: unset;
      left: 12rem;
    }
  }

  input::after {
    content: "✔";
    position: absolute;
    top: -1rem;
    left: 3rem;
    font-size: 15rem;
    font-weight: 600;
    color: #fff;
    // display: none;
  }

  input:checked {
    background-color: rgba(100, 46, 142, 1);
  }
}

.GoodsPrice {
  margin: 12rem 16rem;

  border-radius: 12rem;
  background: rgba(255, 255, 255, 1);

  display: flex;
  flex-direction: column;

  padding: 8rem 0rem;

  >div {
    display: flex;
    justify-content: space-between;

    height: 23rem;
    padding: 6rem 12rem;

    font-size: 16rem;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);

    span {
      float: right;
      font-size: 16rem;
      font-weight: 500;
    }
  }
}

.Total {
  height: 66rem;
  border-radius: 12rem;
  background: rgba(255, 255, 255, 1);

  margin: 12rem 16rem;
  padding: 0 12rem;

  font-size: 20rem;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);

  display: flex;
  align-items: center;
  justify-content: space-between;

  span {
    right: 12rem;
    font-size: 24rem;
    color: rgba(100, 46, 142, 1);
  }
}

.Submit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 50rem;
  border-radius: 8rem;
  background: #642e8eff;
  font-size: 20rem;
  line-height: 50rem;
  text-align: center;
  font-weight: 500;
  margin: 0 16rem 20rem;
  color: rgba(255, 255, 255, 1);
}

.Placeholder2 {
  height: 113rem;
}

.mask {
  width: 390rem;
  height: 104rem;
  position: fixed;
  top: 0;
  z-index: 999;
}

// 地址
.addressDetail {
  height: 80vh;
  padding-bottom: 150rem;
  background-color: rgba(245, 245, 245, 1);
  border-radius: 16rem 16rem 0 0;

  position: fixed;
  bottom: 0;

  overflow: auto;
  overflow-x: hidden;

  .item {
    width: 360rem;
    height: 97rem;
    margin: 0rem 16rem 0;
    border-radius: 12rem;
    background: rgba(255, 255, 255, 1);
    position: relative;
    top: 40rem;
    flex-direction: column;
    justify-content: space-between;

    .address {
      font-size: 16rem;
      font-weight: 500;
      height: 35rem;
      width: 100%;
      line-height: 16rem;
      color: rgba(107, 107, 107, 1);
      padding: 12rem 12rem 0;
    }

    .contact {
      display: flex;
      margin: 15rem 169rem 16rem 12rem;
      font-size: 14rem;
      line-height: 19.6rem;
      color: rgba(153, 153, 153, 1);

      .consignee {
        font-weight: 400;
        margin-right: 10rem;
      }

      .ContactNumber {
        font-weight: 500;
      }
    }

    .Revise {
      position: absolute;
      right: 12rem;
      bottom: 12rem;
      width: 70rem;
      height: 32rem;
      border-radius: 4rem;
      line-height: 32rem;
      text-align: center;
      border: 1rem solid rgba(100, 46, 142, 1);
      font-size: 14rem;
      font-weight: 400;
      color: rgba(100, 46, 142, 1);
    }

    .delete {
      position: absolute;
      top: 8rem;
      right: 12rem;

      width: 18rem;
      height: 18rem;

      border-radius: 50%;
      border: 1rem solid rgba(100, 46, 142, 1);
      line-height: 18rem;
      text-align: center;
      font-size: 14rem;

      &.is_rtl {
        right: unset;
        left: 12rem;
      }
    }
  }
}

// 除了第一个item
.addressDetail .item:nth-child(n + 2) {
  margin-top: 8rem;
}

.box {
  height: 88rem;
  background-color: rgba(245, 245, 245, 1);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 16rem;

  .addNewAddress {
    flex: 1;
    height: 50rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2rem solid;
    border-radius: 10rem;

    font-size: 18rem;
    color: #642e8eff;

    .icon {
      margin: 0 10rem;
      width: 25rem;
      height: 25rem;
      text-align: center;
      line-height: 25rem;
      border: 2rem solid;
      color: #642e8eff;
      border-radius: 50%;
      font-size: 20rem;
    }
  }
}

.msk2 {
  background-color: rgba(73, 73, 73, 0.404);
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .addAddressPop {
    position: absolute;
    background-color: rgb(255, 255, 255);
    border-radius: 16rem;

    top: calc((100vh - 208rem) / 2);
    left: calc((100vw - 300rem) / 2);
    height: 208rem;

    padding: 0 16rem;

    .userName {
      width: 276rem;

      margin-top: 16rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30rem;
      border-bottom: 1rem solid rgba(201, 202, 204, 0.301);
      font-size: 13rem;

      span {
        color: rgb(59, 54, 54);
      }

      input {
        color: rgb(201, 202, 204);
        width: 169rem;
        height: 26rem;
      }
    }

    .FullAddress {
      width: 276rem;

      margin-top: 16rem;
      height: 30rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rem solid rgba(201, 202, 204, 0.301);
      font-size: 13rem;

      span {
        color: rgb(59, 54, 54);
      }

      input {
        color: rgb(201, 202, 204);
        width: 169rem;
        height: 26rem;
      }
    }

    .phoneNum {
      width: 276rem;

      margin-top: 16rem;
      height: 30rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rem solid rgba(201, 202, 204, 0.301);
      font-size: 13rem;

      span {
        color: rgb(59, 54, 54);
      }

      input {
        color: rgb(201, 202, 204);
        width: 169rem;
        height: 26rem;
        outline: none;
        border: none;
      }
    }

    .confirmBtn {
      height: 38rem;
      margin-top: 15rem;
      background-color: rgb(100, 46, 142);
      border-radius: 12rem;

      display: flex;
      justify-content: center;
      align-items: center;

      color: #fff;
      font-size: 15rem;
      font-weight: 500;
    }
  }
}

.msk3 {
  background-color: rgba(73, 73, 73, 0.404);
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .deleteAddress {
    position: absolute;
    background-color: rgb(255, 255, 255);
    border-radius: 16rem;
    top: calc((100vh - 120rem) / 2);
    left: calc((100vw - 250rem) / 2);
    width: 250rem;
    height: 120rem;

    .title {
      height: 70rem;
      width: 250rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16rem;
      border-bottom: 1rem solid rgb(216, 218, 221);
      color: rgb(100, 46, 142);
    }

    div {
      width: 100%;
      display: flex;
      font-size: 20rem;
      color: rgb(153, 153, 153);
      height: 50rem;

      .yes {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .no {
        border-right: 1rem solid rgb(216, 218, 221);
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
